<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="productId" label="大类名称">
                <el-select v-model="search.productId" :clearable="true" placeholder="请选择" >
                  <el-option v-for="item in productList" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="seriesName" label="小类名称">
                <el-input v-model="search.seriesName" placeholder="小类名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="seriesStatus" label="有效状态">
                <r-select
                  v-model="search.seriesStatus"
                  :formatter="filterCode"
                  placeholder="请选择"
                  type="1001" />
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button type="primary" @click="syncSelect()">同步选配器
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 表单表头信息 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">产品小类维护</div>
          <el-button-group>
            <el-button type="primary" icon="el-icon-plus" @click="addSeries()">新增</el-button>
          </el-button-group>
        </div>
        <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column align="center" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" content="编辑" placement="bottom">
                <el-button
                  type="text"
                  style="font-size: 20px;"
                  icon="el-icon-edit-outline"
                  @click="editaddSeries(scope.row)"/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="false" prop="series_id" label="series_id"/>
          <el-table-column v-if="false" prop="dms_series_id" label="dms_series_id"/>
          <el-table-column v-if="false" prop="product_id" label="product_id"/>
          <el-table-column v-if="false" prop="dms_series_name" label="dms_series_name"/>
          <el-table-column prop="product_name" label="所属大类"/>
          <el-table-column prop="series_name" label="小类名称"/>
          <el-table-column prop="series_seq" label="排序"/>
          <el-table-column :formatter="filterCode" prop="series_status" label="小类状态" type="1001"/>
        </BaseTable>
      </div>
    </div>
    <!-- 新增div -->
    <!-- 弹框 -->
    <el-dialog v-dialogDrag v-if="dialogFormVisible" :title="earnestTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="55%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" :disabled="false" label-width="100px">
        <el-row v-if="false" :gutter="6">
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="seriesId" label="seriesId">
              <el-input v-model="form.seriesId" placeholder="seriesId" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="dmsSeriesId" label="dmsSeriesId">
              <el-input v-model="form.dmsSeriesId" placeholder="请选择" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="seriesName" label="小类名称">
              <el-input v-model="form.seriesName" show-word-limit maxlength="5" placeholder="请选择" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="dmsSeriesName" label="所属DMS车系" >
              <el-input v-model="form.dmsSeriesName" >

                <i slot="suffix" class="el-input__icon el-icon-circle-plus" clearable @click="openSelect"/>
                <i slot="suffix" class="el-input_icon el-icon-error" @click="clearDealer"/>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="seriesSeq" label="排序">
              <el-input v-model="form.seriesSeq" placeholder="排序" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="productId" label="大类名称">
              <el-select v-model="form.productId" :clearable="true" placeholder="请选择" >
                <el-option v-for="item in productList" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8">
            <el-form-item prop="seriesStatus" label="有效状态">
              <r-select
                v-model="form.seriesStatus"
                :formatter="filterCode"
                placeholder="请选择"
                type="1001"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button v-show="saveBS" type="primary" @click="saveSeries">保 存</el-button>
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
    <selectDmsSeries :open-dialog.sync="openSelectSeries" @getDealerInfo="getSelectData" @selectClose="closeOpenDialog"/>
  </div>
</template>

<script>
import {
  getSeriesList,
  findProduct,
  addNewSeries,
  editSeries,
  synDmsBrandAndSeries
} from '@/api/vehicle/seriesMaintenance.js'
// import {
//   getUserInfoById
// } from '@/api/admin/org/gms/employeeInfo'
import Pagination from '@/components/Pagination'
import BaseTable from '@/components/BaseTable'
import BaseTableNoPage from '@/components/BaseTable/BaseTableNoPage'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import filtercode from '@/components/Checkbox/filtercode'
import selectDmsSeries from '@/views/productDisplay/productMaintenance/selectDmsSeries.vue'
import _ from 'lodash'
export default {
  name: 'Payment',
  components: {
    BaseTable,
    selectDmsSeries,
    BaseTableNoPage,
    Pagination,
    rSelect,
    filtercode
  },
  mixins: [formMixins],
  data() {
    return {
      openSelectSeries: false,
      productList: [],
      active: 1,
      dialogFormVisible: false,
      earnestTitle: '',
      dialogType: '',
      saveBS: '',
      type: 0,
      search: {
        limit: 10,
        pageNum: 1,
        productId: '',
        seriesName: '',
        seriesStatus: 10011001
      },
      // 车系
      dialogVisible: false,
      rules: {
        seriesName: [{
          required: true,
          message: '请输入小类名称',
          trigger: 'blur'
        },
        {
          max: 5,
          message: '最多输入5个字符',
          trigger: 'blur'
        }],
        productId: [{
          required: true,
          message: '请选择所属大类',
          trigger: 'blur'
        }],
        seriesSeq: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }],
        seriesStatus: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }]
        // dmsSeriesName: [{
        //   required: true,
        //   message: '请选择车系',
        //   trigger: 'blur'
        // }]
      },
      form: {
        seriesId: '',
        seriesName: '',
        productId: '',
        dmsSeriesId: '',
        dmsSeriesName: '',
        seriesStatus: '',
        seriesSeq: ''
      }
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
    this.searchHandle()
    this.searchProductName()
  },
  methods: {
    clearDealer() {
      this.form.dmsSeriesId = ''
      this.form.dmsSeriesName = ''
      this.$forceUpdate()
    },
    syncSelect() {
      synDmsBrandAndSeries()
        .then(res => {
          this.$message({
            type: 'success',
            message: '同步选配器成功！'
          })
        })
        .catch(err => {
          this.$message({
            type: 'warning',
            message: '同步选配器失败！!'
          })
        })
    },
    closeOpenDialog() {
      this.openSelectSeries = false
    },
    getSelectData(data) {
      this.form.dmsSeriesName = data.series_name
      this.form.dmsSeriesId = data.dms_series_id
      this.openSelectSeries = false
    },
    // 打开dms_series弹出框
    openSelect() {
      this.openSelectSeries = true
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false
    },
    // // 查询车系
    searchProductName() {
      findProduct().then(res => {
        this.productList = res
      }).catch(err => {
      })
    },
    // // 查询
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      table.wait()
      getSeriesList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    // 增加或者编辑页面弹框
    addSeries() {
      this.resetForm('form')
      this.form.seriesId = ''
      this.form.seriesName = ''
      this.form.productId = ''
      this.form.dmsSeriesId = ''
      this.form.seriesStatus = ''
      this.form.dmsSeriesName = ''
      this.form.seriesSeq = ''
      this.saveBS = true
      this.dialogType = 'add'
      this.earnestTitle = '增加小类'
      this.dialogFormVisible = true
    },
    // 编辑
    async editaddSeries(data) {
      this.saveBS = true
      this.dialogType = 'edit'
      this.earnestTitle = '编辑小类'
      // await selectById(data.payment_id)
      //   .then(res => {
      this.form.seriesId = data.series_id
      this.form.seriesName = data.series_name
      this.form.productId = data.product_id
      this.form.dmsSeriesId = data.dms_series_id
      this.form.seriesStatus = data.series_status
      this.form.dmsSeriesName = data.dms_series_name
      this.form.seriesSeq = data.series_seq
      // })
      this.dialogFormVisible = true
    },
    // // 增加和编辑
    saveSeries() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            return addNewSeries(this.form).then(res => {
              this.$message({
                type: 'success',
                message: '产品小类新增成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.errorMsg
              })
            })
          }
          if (this.dialogType === 'edit') {
            editSeries(this.form, this.form.EMP_ID).then(res => {
              this.$message({
                type: 'success',
                message: '产品小类编辑成功!'
              })
              this.cancel()
              this.dialogFormVisible = false
              this.searchHandle()
            }).catch(err => {
              this.$message({
                type: 'error',
                message: err.response.data.errorMsg
              })
            })
          }
        }
      })
    }
  }
}

</script>

<style scoped>
.content{
  overflow-y: auto
}
.sele{
 width: 230px;
}
</style>
